import React, { Component } from 'react'
import { connect } from 'react-redux'
import { EventCenter } from '../../utils/Global'

class NewMsgCount extends Component {
  onClick = () => {
    EventCenter.emit('qa_list_scroll_bottom')
  }
  render() {
    const { count, color_theme } = this.props
    let icon = require(`@images/live_new_msg_icon${color_theme == 'red' ? '_red' : ''}.png`)
    return count ? (
      <div onClick={this.onClick} className={`qa_new_msg_con ${color_theme == 'red' ? 'red' : ''}`}>
        {count}条新消息
        <img className="qa_new_msg_drop" src={icon} alt=""/>
      </div>
    ) : null
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.QaState.new_msg_count,
    color_theme: state.MainScreenState.info.color_theme,
  }
}

export default connect(mapStateToProps)(NewMsgCount)
